﻿@model smp.ButterflyCakes.Models.ViewModels.Order.ColourPickerView
<div id="colourPickerModal" class="modal hide fade" role="dialog">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3>
            Create new colour mix</h3>
    </div>
    <div class="modal-body">
        <div class="span6">
            <div>
                <strong>Select Colour Manufacturer</strong>
                @MvcHtmlString.Create(Model.SelectManufacturers.SetElementId("ColourManufacturers").Html)
            </div>
            <div id="coloursContainer" style="max-height: 300px; overflow-x: hidden; overflow-y: scroll; padding-bottom: 10px;">
                @Html.Partial("ColourPickerColours", Model.Colours)
            </div>
        </div>
        <div class="span6">
            <div id="MixingContainer" class="row-fluid">
                <div>
                    <h5>
                        Mixed Colour</h5>
                    <div id="mixedColour" style="height: 50px; width: 100%; background: white">
                    </div>
                </div>
                <div style="max-height: 278px; overflow-x: hidden; overflow-y: scroll; padding-bottom: 10px;">
                    <table id="componentColours" class="table table-bordered table-hover">
                        <tr>
                            <th colspan="4">
                                Component Colours
                            </th>
                        </tr>
                        <tr class="noColoursRow">
                            <td colspan="4">
                                Please select your first base colour
                            </td>
                        </tr>
                    </table>
                    </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-warning" data-dismiss="modal" aria-hidden="true">
            Cancel</button>
        <button class="btn btn-primary">
            Save New Mixture</button>
    </div>
</div>
